
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Promsie链式调用</title>
</head>
<body>
    
    <script>
        /*
            1.使用promsie.then链式调用语法特点来解决传统的回调地狱问题
            2..then之所以可以不间断的链式调用是因为每次执行完都会返回新的promsie对象
        */
        // 1.传统模拟ajax请求数据接口：商品分类==>商品列表===>商品详情(目的)   回调地狱
        // setTimeout(() => {
        //     console.log('第一个请求完毕，cate')
        //     setTimeout(() => {
        //         console.log('第二个请求完毕，list')
        //         setTimeout(() => {
        //             console.log('第三个请求完毕，desc')
        //         }, 1000)
        //     }, 1000)
        // }, 1000)


        // 2.使用promsie.then链式调用语法特点来解决传统的回调地狱问题  new Promise(()=>{}).then().then().then()
        // 2.1模拟请求商品的分类数据
        // new Promise((resolve,reject)=>{
        //     setTimeout(() => {
        //         console.log('第一个请求完毕，cate')
        //         resolve([1,2,3,4,5])
        //     }, 1000);
        // }).then(res=>{
        //     console.log('商品分类：', res)
        //     setTimeout(() => {
        //             console.log('第二个请求完毕，list')
        //     }, 1000);
           
        // }).then(res1=>{
        //     console.log('商品详情：', res1)
        //     setTimeout(() => {
        //         console.log('第三个请求完毕，desc')

        //     }, 1000);
        // }).then(res2=>{
        //     console.log('商品...：', res2)
        //     setTimeout(() => {
              
        //     }, 1000);
        // })


        // new Promise((resolve,reject)=>{
        //     setTimeout(() => {
        //         console.log('第一个请求完毕，cate')
        //         resolve([1,2,3,4,5])
        //     }, 1000);
        // }).then(res=>{
        //     console.log('商品分类：', res)
        //     console.log('第二个请求完毕，list')
        //     return  new Promise((resolve,reject)=>{
        //         setTimeout(() => {
        //             resolve([{ id: 11, pid: 1, name: "小米手机" }])
        //         }, 1000);
        //     })

        // }).then(res1=>{
        //     console.log('商品详情：', res1)
        //     setTimeout(() => {
        //         console.log('第三个请求完毕，desc')
        //         return  new Promise((resolve,reject)=>{
        //             setTimeout(() => {
        //                 resolve("结束")
        //             }, 1000);
        //         })
        //     }, 1000);
        // }).then(res2=>{
        //     console.log('商品...：', res2)
        // })

        /*
            3.基于promise封装网络请求方法（定时器模拟）
            params：
                data([{},{}]):模拟请求服务端返回的假数据
            return:
                promise对象
        */

        function request(data) {
            return new Promise((resolve,reject)=>{
                // 通过定时器模拟网络请求
                setTimeout(() => {
                    resolve(data)
                }, 1000)
               
            })
        }

       // 3.1模拟请求商品分类数据
        let cateList = request([{ id: 1, name: "手机" }])
        // 3.2根据商品分类id模拟请求商品列表数据
        let productList = cateList.then(res => {
            return request([{ id: 11, cateid: 1, name: "小米手机" }])
        })
        // 3.3根据商品列表数据的id模拟请求商品详情数据
        let descData = productList.then(res => {
            return request([{ id: 111, cate: 1, name: '红米手机', price: 1999 }])
        })
        descData.then(res => console.log('商品详情数据是：', res))
    </script>
</body>
</html>